<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet"
	th:href="@{/manager/layui/lib/layui-v2.5.5/css/layui.css}"
	href="../../lib/layui-v2.5.5/css/layui.css" media="all">
<link rel="stylesheet" th:href="@{/manager/layui/css/public.css}"
	href="../../css/public.css" media="all">

<style>
body {
	background-color: #ffffff;
}


.ke-v-tab-controle-btn.ossFile-not-allowed>a:hover {cursor: not-allowed;color: #8EADC3;}

</style>
</head>
<body>
	<div class="layui-form layuimini-form" >
		<input type="hidden" name="id">
		<div class="layui-form-item">
			<label class="layui-form-label required">视频分类</label>
			<div class="layui-input-inline">
				<input type="text" lay-verify="required" id="parentvalue" readonly="readonly"
					placeholder="请选择分类" class="layui-input">
				<input type="hidden" name="categoryid"  id="parentId"> 
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">文件类型</label>
			<div class="layui-input-inline">
				<input type="radio" name="mediatype" value="1" title="视频" checked="checked"> 
				<input
					type="radio" name="mediatype" value="2" title="音频">
			</div>
		</div>

		<div class="layui-upload">
			<button type="button" class="layui-btn layui-btn-normal"
				id="selectfiles">选择多文件</button>
				  <input id="files" type="hidden" value=""/>
				   <input id="SurplusSpace" type="hidden" value="10337776128"/> 
				   <input id="CurrentSpace" type="hidden" value="0"/>
			<div class="layui-upload-list">
				<table class="layui-table">
					<thead>
						<tr>
							<th>文件名</th>
							<th>大小</th>
							<th>格式</th>
<!-- 							<th>状态</th> -->
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="ossfile"></tbody>
				</table>
			</div>
			<button type="button" class="layui-btn"  id="postfilesBtn">开始上传</button>
			 <small>共 <span id="fileCount" class="badge"></span> 个文件</small>
		</div>


	</div>
	<!-- 	</form> -->
	<script th:src="@{/manager/layui/lib/layui-v2.5.5/layui.js}"
		src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
	<script type="text/javascript" 
		th:src="@{/manager/js/jquery-1.8.3.min.js}"></script>
	<script type="text/javascript" th:src="@{/manager/js/crypto.js}"></script>
	<script type="text/javascript" th:src="@{/manager/js/base64.js}"></script>
	<script type="text/javascript" src="../js/plupload.full.min.js"
		th:src="@{/manager/plupload/js/plupload.full.min.js}"></script>
	<script type="text/javascript" th:src="@{/manager/js/upload.js}"></script>
	<script>
		layui.use([ 'form','element'], function() {
			var form = layui.form, layer = layui.layer, $ = layui.$;
			var element = layui.element;
			
			$("#parentvalue").click(function(){
				layer.open({
	                title: '选择视频分类',
	                type: 2,
	                shade: 0.2,
	                maxmin:true,
	                shadeClose: true,
	                area: ['30%', '50%'],
	                content: '/videocate/totreelist',
	            });
			});	
			
			
		function addSubmit(file) {
            if (file == null && typeof (file) == "undefined") {
            	layer.alert("提交视频信息内容错误，请重试!", function () {
                    window.location.reload()
                });
                return;
            }

            var effect = "0";
            var videoUrl = file.url;
            var videoSize = plupload.formatSize(file.size);
            var videoName = file.name.substring(0, file.name.lastIndexOf("."));
            var categoryid = $("#parentId").val();
            var videoInfo = $("#videoInfo").val();
//             var fileType = $('input[name="fileType"]:checked').val();
            var fileType = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length);
            $.ajax({
                url: "/video/add",
                data: {
                    "mediaorginalname": videoName,
                    "categoryid": categoryid,
                    "mediaremark": videoInfo,
                    "mediaorginalpath": videoUrl,
                    "mediaorginalsize": function () {
                       var idx =  videoSize.indexOf("mb");
                        if ( idx != -1){
                           return  videoSize.replace(/mb/,'').trim();
                        }else {
                            return videoSize.replace(/gb/,'').trim()*1024;
                        }
                    },
                    "mediaorginaltype": fileType,
                    "mediaplayurl": effect
                },
                type: "post",
                async: true,
                timeout: 0,
                dataType: "json",
                success: function (result) {
                	
                }
//                 ,error: function () {
//                     window.location.href = "/video/tolist";
//                 }
            });

        }
			
			
			
			 var uploader = new plupload.Uploader({
		            runtimes: 'html5,flash,silverlight,html4',
		            browse_button: 'selectfiles',
		           // container: document.getElementById('container'),
		            flash_swf_url: '/manager/plupload/js/Moxie.swf',
		            silverlight_xap_url: '/manager/plupload/js/Moxie.xap',
		            url: "/video/upload",
		            max_file_size : '3gb',//100b, 10kb, 10mb, 1gb
		            chunk_size : '1mb',//分块大小，小于这个大小的不分块
		            unique_names : true,//生成唯一文件名
		            filters: {
		                mime_types: [ //只允许上传视频文件
//	 	                    {title: "files", extensions: "avi,mp4,mp3,wmv,flv"}
		                ],
		                prevent_duplicates: true //不允许选取重复文件
		            },

		            init: {
		                PostInit: function (up) {
		                    $('#postfilesBtn').attr('disabled', true);
		                    $('#fileCount').html(0);
		                    document.getElementById('ossfile').innerHTML = '<tr id="ossTips"><td colspan="4"><section class="ke-no-data-tips"><span>&nbsp;</span><p>还没有上传任何视频文件~~~</p></section></td></tr>';
		                    $('#postfilesBtn').unbind().bind('click', function () {
		                        $(".ossFile-bar-close").removeClass("ossFile-bar-close").addClass('ossFile-not-allowed');
		                        uploader.start();
//	 	                        set_upload_param(uploader, [[${uppath}]], '', false, $("#userId").val());
		                        set_upload_param(uploader, "D:\\NIITTEST1\\", '', false, $("#userId").val());
		                        $('#postfilesBtn').attr('disabled', true);
		                        return false;
		                    });
		                },

		                StateChanged: function (up) {
		                    //up.start();
		                    //状态变更
		                },
		                FilesAdded: function (up, files) {
		                    $("#files").val(files.length);
		                    plupload.each(files, function (file) {
		                        var SurplusSpace = parseInt($("#SurplusSpace").val());
		                        var CurrentSpace = parseInt($("#CurrentSpace").val());
		                        var uploadSpace = CurrentSpace + parseInt(file.size);
		                        if (parseInt(uploadSpace) > SurplusSpace) {
		                            uploader.removeFile(file.id);
		                            dialogKe("上传空间不足,无法继续添加文件");
		                        } else {
		                            $("#CurrentSpace").val(uploadSpace);
		                            var fileObjStr = '';
		                            fileObjStr += '<tr name="fileCountTr">';
		                            fileObjStr += '<td id="' + file.id + '" class="ke-tab-vAttr">';
		                            fileObjStr += '<div class="media-body">';
		                            fileObjStr += '<h4 class="media-heading"><a title="' + file.name + '">' + file.name + '</a></h4>';
		                            fileObjStr += '</div>';
// 	 	                            fileObjStr += '<div class="progress"></div>';
		                            fileObjStr += ' <div class="layui-progress layui-progress-big" lay-filter="fileprogress'+file.id+'"  lay-showPercent="true"></div>';
		                            fileObjStr += '</td>';
		                        
		                            fileObjStr += '<td align="center" valign="middle">';
		                            fileObjStr += '<span class="label label-default">' + plupload.formatSize(file.size) + '</span>';
		                            fileObjStr += '</td>';
		                            fileObjStr += '<td align="center" valign="middle">';
		                            fileObjStr += '<span class="layui-btn layui-btn-xs">' + file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length) + '</span>';
		                            fileObjStr += '</td>';
		                            fileObjStr += '';
		                            fileObjStr += '<td align="center" valign="middle">';
		                            fileObjStr += '<div class="ke-v-tab-controle-btn ossFile-bar-close">';
		                            fileObjStr += '<a href="javascript:;" alt=' + file.id + ' class="layui-btn layui-btn-warm layui-btn-sm">删除</a>';
		                            fileObjStr += '</div>';
		                            fileObjStr += '</td>';
		                            fileObjStr += '</tr>';
		                            document.getElementById('ossfile').innerHTML += fileObjStr;
//	 	                            if (captionInit == 1) {
//	 	                                $("#sec" + file.id).addClass("autoOn");
//	 	                            }
		                        }
		                    });


		                    var ossFileTrLen = $('#ossfile>tr[name="fileCountTr"]').length;
		                    if (ossFileTrLen > 0) {
		                        $('#ossTips').hide();
		                        $('#postfilesBtn').attr('disabled', false);
		                        $('#fileCount').html(ossFileTrLen);
		                    }

		                    //删除单条上传视频
		                    $('#ossfile').on('click', '.ossFile-bar-close', function () {
		                        var _this = $(this),
		                            _fileId = _this.find("A").attr("alt");
		                        _fileTr = _this.parent().parent();
		                        _fileTr.remove();
		                        uploader.removeFile(_fileId);

		                        var ossFileTrLen = $('#ossfile>tr[name="fileCountTr"]').length;
		                        $('#fileCount').html(ossFileTrLen);
		                        if (ossFileTrLen <= 0) {
		                            $('#ossTips').show();
		                            $('#postfilesBtn').attr('disabled', true);
		                        }
		                        ;
		                    })
		                },

		                BeforeUpload: function (up, file) {
//	 	                    file.url = set_upload_param(up, [[${uppath}]], file.name, true, $("#userId").val());
		                    file.url = set_upload_param(up,"D:\\NIITTEST1\\" , file.name, true, $("#userId").val());
		                    $("#" + file.id).attr('title', file.name + ',' + plupload.formatSize(file.size) + ',' + file.url);
		                },

		                UploadProgress: function (up, file) {
		                	console.info(file.id);
		                    var d = $('#' + file.id),
// 		                        p = d.find(".progress");
		                        p = d.find(".layui-progress");
		                    p.html('<div class="layui-progress-bar"  lay-percent="0%"></div>');
							element.progress('fileprogress'+file.id, file.percent+"%");
		                    if (file.percent == 100) {
		                        d.parent().attr('name', 'fileSuccess');
		                    }else{
		                    	
		                    }


		                },

		                FileUploaded: function (up, file, info) {
		                    if (info.status == 200) {
	 	                        addSubmit(file);
		                    } else {
		                        document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
		                    }
		                },
		                UploadComplete: function (up, files) {
		                    //带确定，取消按钮提示框。
	 	                    layer.alert("操作成功", function () {
	 	                    	parent.window.location.reload();
	 	                    });
		                },
		                Error: function (up, err) {
		                	console.info(err);
		                }
		            }
		        });

		        uploader.init();
			
		});
		
		
		
		
		
		
	</script>
</body>
</html>